<template>
    <view class="container">
        <view class="top">
            <view class="top1">
                <view class="top2">
                    <i class="back" @click="$handleOpenUrl('',2)"></i>
                    <a href="tel:4000-666-591"><i class="share"></i></a>
                </view>
            </view>
			<swiper class="swiper" :autoplay="true" circular="true" :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
			 indicator-active-color="#fff">
				<swiper-item v-for="(item, index) in imgs" :key="index">
					<!-- 不可为全路径 -->
					<image :src="item.path" @click="item.url&&$handleOpenUrl(item.url)" />
				</swiper-item>
			</swiper>
			<image class="img2" src="https://oss-shop.cciinet.com/files/MiniProgram/more_bg.png" mode="widthFix"></image>
        </view>
        <view class="title">我们的优势</view>
        <view class="info">
			<image class="img_item" src="https://oss-shop.cciinet.com/files/MiniProgram/advantage1.png"></image>
			<image class="img_item" src="https://oss-shop.cciinet.com/files/MiniProgram/advantage2.png"></image>
			<image class="img_item" src="https://oss-shop.cciinet.com/files/MiniProgram/advantage3.png"></image>
			<image class="img_item" src="https://oss-shop.cciinet.com/files/MiniProgram/advantage4.png"></image>
        </view>
        <view class="title">提交采购需求</view>
        <view class="demand">
            <view class="demand_item">
                <p>产品名称</p>
                <view class="input">
                    <input
						placeholder-class="placeholder-class"
                        type="text"
                        maxlength="30"
                        placeholder="例XX国XX厂猪肋排"
                        v-model="productName"
                    />
                </view>
            </view>
            <view class="demand_item">
                <p>采购数量</p>
                <view class="input">
                    <input
						placeholder-class="placeholder-class"
						type="digit"
						maxlength="15"
                        v-model="quantity"
                        placeholder="请输入数量"
                    />
                    <span>吨</span>
                </view>
            </view>
            <view class="demand_item">
                <p v-html="'联&nbsp;&nbsp;系&nbsp;&nbsp;人'"></p>
                <view class="input">
                    <input
						placeholder-class="placeholder-class"
                        type="text"
                        v-model="contacts"
                        maxlength="15"
                        placeholder="请输入联系人姓名"
                    />
                </view>
            </view>
            <view class="demand_item">
                <p>联系电话</p>
                <view class="input">
                    <input
						placeholder-class="placeholder-class"
                        type="tel"
                        v-model="mobile"
                        placeholder="请输入联系电话"
                    />
                </view>
            </view>
        </view>
        <view class="btn" @click="savePurchaseIntention">
            <button>提交采购</button>
        </view>
        <view
            class="popup"
            v-if="showDialog"
            @click="close"
        >
            <view class="content">
                <p class="p1 pd fs_32">尊敬的客户：</p>
                <p class="p2 pd">您的需求提交成功，稍后将有专人与您联系</p>
                <p class="p3 pd">
                    如有疑问，请拨打
                    <span class="fs_28 fw_600">4000-666-591</span>
                </p>
                <p class="p4 pd fs_28">
                    <span class="fw_600">{{ seconds }}s</span>后自动关闭
                </p>
                <view class="confirm" @click="close">确定</view>
            </view>
        </view>
    </view>
</template>
<script>
import { getSlideShows } from "@/api/common/index.js";
import { savePurchaseIntention } from "@/api/importAgent/index.js";
export default {
    data() {
        return {
            imgs: [],
            contacts: "",
            mobile: "",
            productName: "",
            quantity: "",
            showDialog: false,
            seconds: 60,
        };
    },
    mounted() {
        this.getSlideImgs();
    },
    methods: {
        async getSlideImgs() {
            let res = await getSlideShows({positionId:914});
            if (res.code === 0) {
                this.imgs = res.data;
            } else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
            }
        },
        async savePurchaseIntention() {
            if (!this.productName) {
				uni.showToast({
					title: '请输入产品名称',
					icon: 'none'
				})
                return;
            }
            if (!this.quantity) {
				uni.showToast({
					title: '请输入采购数量',
					icon: 'none'
				})
                return;
            }
            if (!this.contacts) {
				uni.showToast({
					title: '请输入联系人',
					icon: 'none'
				})
                return;
            }
            if (!this.mobile) {
				uni.showToast({
					title: '请输入联系电话',
					icon: 'none'
				})
                return;
            }
            // let reg = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
            if (!this.$regular.checkPhone(this.mobile)) {
				uni.showToast({
					title: '联系电话格式错误',
					icon: 'none'
				})
                return;
            }
            let res = await savePurchaseIntention({
                contacts: this.contacts,
                mobile: this.mobile,
                productName: this.productName,
                quantity: this.quantity,
            });
            if (res.code === 0) {
                this.showDialog = true;
				this.open();
            } else {
                this.$toast(res.msg);
            }
        },
        open() {
            this.seconds = 60;
            this.timer = setInterval(() => {
                this.seconds--;
                if (this.seconds == 0) {
                    this.reset();
                }
            }, 1000);
        },
        close() {
            this.reset();
        },
        reset() {
            this.showDialog = false;
            clearInterval(this.timer);
            this.timer = null;
            // this.contacts= ""
            // this.mobile= ""
            // this.productName= ""
            // this.quantity= ""
			var pages = getCurrentPages();
			console.log(pages)
			var prevPage = pages[pages.length - 2];
			prevPage.$vm.isLoad = 2;
			this.$handleOpenUrl('',2)
        },
        // handleChange(val) {
        //     if(this.quantity.split(".").length==2&&val=='.') {
        //         return
        //     }
        //     if (
        //         (this.quantity + val).split(".")[1] &&
        //         (this.quantity + val).split(".")[1].length >= 2
        //     ) {
        //         console.log(
        //             (this.quantity + val).split(".")[1].substring(0, 2)
        //         );
        //         this.quantity =
        //             (this.quantity + val).split(".")[0] +
        //             "." +
        //             (this.quantity + val).split(".")[1].substring(0, 2);
        //     } else {
        //         this.quantity = this.quantity + val;
        //     }
        // },
    },
};
</script>

<style scoped lang="scss">
.top {
    height: 300upx;
    width: 100%;
    position: relative;
    .img1 {
        height: 300upx;
        width: 100%;
    }
    &::v-deep .van-swipe__indicators {
        bottom: 20upx;
    }
    &::v-deep .van-swipe__indicator {
        width: 14upx;
        height: 14upx;
    }
    .img2 {
        position: absolute;
        bottom: -2upx;
        width: 100%;
		z-index: 6666;
    }
    .top1 {
        position: absolute;
        top: 23upx;
        z-index: 99;
        width: 100%;
        .top2 {
            padding-top: 24upx;
            margin-left: 37upx;
            margin-right: 37upx;
            display: flex;
            justify-content: space-between;
            .back {
                display: inline-block;
                width: 40upx;
                height: 40upx;
                background: url("https://oss-shop.cciinet.com/files/MiniProgram/back1.svg") no-repeat;
                background-size: 100% 100%;
            }
            .share {
                display: inline-block;
                width: 46upx;
                height: 46upx;
                background: url("https://oss-shop.cciinet.com/files/MiniProgram/phone.svg") no-repeat;
                background-size: 100% 100%;
            }
        }
    }
	.swiper {
		image {
			width: 100%;
		}
	}
}
.title {
    font-size: 32upx;
    color: #333333;
    margin-top: 31upx;
    margin-bottom: 25upx;
    text-align: center;
    font-weight: bold;
}
.info {
    display: flex;
    flex-wrap: wrap;
    margin: 0 25upx;
    justify-content: space-between;
    .img_item {
		width: 49%;
        height: 179upx;
        margin-bottom: 11upx;
    }
}
.demand {
    margin: 0 25upx;
    // height: 349upx;
    background: #f7f7f7;
    border-radius: 10upx;
    padding: 0 30upx;
    &::v-deep .van-number-keyboard__keys {
        .van-key__wrapper {
            button {
                height: 70upx;
            }
        }
    }
	/deep/ .placeholder-class {
		font-size: 24upx;
		color: #999999;
	}
    .demand_item {
        height: 88upx;
        display: flex;
        border-bottom: 2upx solid #fff;
        align-items: center;
        p {
            margin-right: 146upx;
            white-space: nowrap;
            font-size: 24upx;
            color: #666666;
        }
        .input {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            input {
                width: 100%;
                height: 100%;
                background: #f7f7f7;
            }
            input::placeholder {
                color: #cccccc;
            }
            span {
                font-size: 24upx;
                color: #666666;
            }
        }
    }
}
.btn {
    display: flex;
    justify-content: center;
    button {
        margin: 28upx 0;
        width: 358upx;
        padding: 15upx 0;
        background: linear-gradient(-13deg, #218eed, #035abe);
        border-radius: 36upx;
        font-size: 28upx;
        color: #ffffff;
    }
}
.container>.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index:999999999999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.5);
    .content {
        border-radius: 8upx;
        width: 690upx;
        height: 500upx;
        // padding: 50upx 20upx;
        background-color: #fff;
        .pd {
            padding: 15upx;
            color: #343434;
        }
        .p3 {
            color: #343434;
            span {
                color: #00428e;
            }
        }
        .p4 {
            text-align: center;
            color: #343434;
            span {
                color: #ea5620;
            }
        }
        .confirm {
            margin: 35upx auto 0;
            width: 500upx;
            height: 88upx;
            line-height: 88upx;
            border: 2upx solid #00428e;
            color: #00428e;
            border-radius: 42upx;
            text-align: center;
        }
    }
}
</style>